<template>
    <div class="insert-order" @click="listen($event)">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading">Insert Order Form</div>
                    <div class="panel-wrapper collapse in" aria-expanded="true">
                        <div class="panel-body">
                            <loading v-show="loading"></loading>
                            <div class="form-group">
                                <label class="control-label col-md-3"></label>
                                <div class="col-md-9">
                                    <div class="radio-list">
                                        <div class="checkbox checkbox-success checkbox-circle"  style="display: inline-block;">
                                            <input  type="checkbox" id="insert0" v-model="isOrder">
                                            <label for="insert0">Insert Order</label>
                                        </div>
                                        <div class="checkbox checkbox-success checkbox-circle" style="display: inline-block;">
                                            <input  type="checkbox" id="insert1" v-model="isIcal">
                                            <label for="insert1">Insert Ical</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <form class="form-horizontal form-bordered">
                                <div class="form-body">
                                    <div class="form-group"
                                         :class="{'has-error': !order.physical_room_id.length && isOrder}">
                                        <label class="control-label col-md-3">Physical_Room_id <i class="text-red">*</i></label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <div class="input-group-btn">
                                                    <a class="btn lid-btn btn-info" title="Logical room id"
                                                       @click.stop="getLid"
                                                       data-container=".insert-order" data-placement="right" data-html="true" style="color:#fff !important;"
                                                    >
                                                        Get Lid
                                                    </a>
                                                </div>
                                                <input type="text" class="form-control" placeholder="Physical_Room_id"
                                                       v-model="order.physical_room_id"
                                                >
                                            </div>
                                            <span class="help-block"
                                                  v-show="!order.physical_room_id.length && isOrder">This field must be required</span>

                                        </div>
                                    </div>

                                    <div class="form-group"
                                         :class="{'has-error': !isOrder && isIcal && !order.logical_room_id.length}">
                                        <label class="control-label col-md-3">Logical_Room_id <i class="text-red">*</i></label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <div class="input-group-btn">
                                                    <a class="btn btn-info text-white" title="Logical room id"
                                                       @click.stop="getPid" style="color: #fff !important;"
                                                    >
                                                        Match Pid
                                                    </a>
                                                </div>
                                                <input type="text" class="form-control" placeholder="Logical_Room_id"
                                                       v-model="order.logical_room_id"
                                                >
                                            </div>
                                            <span class="help-block"
                                                  v-show="(!isOrder && isIcal && !order.logical_room_id.length)">Offline Order does't charge, please select Host</span>

                                        </div>
                                    </div>

                                    <div class="form-group"
                                         :class="{'has-error': !order.checkin.length}">
                                        <label class="control-label col-md-3">Check_In <i class="text-red">*</i></label>
                                        <div class="col-md-9">
                                            <input type="date" class="form-control" placeholder="checkin"
                                                   v-model="order.checkin"
                                            >
                                            <span class="help-block"
                                                  v-show="!order.checkin.length">This field must be required</span>
                                        </div>
                                    </div>

                                    <div class="form-group"
                                         :class="{'has-error': !order.checkout.length}">
                                        <label class="control-label col-md-3">Check_Out <i class="text-red">*</i></label>
                                        <div class="col-md-9">
                                            <input type="date" class="form-control" placeholder="checkout"
                                                   v-model="order.checkout"
                                            >
                                            <span class="help-block"
                                                  v-show="!order.checkout.length">This field must be required</span>
                                            <span class="help-block text-danger">Checkout will not occupy the calendar on the day, please confirm with the buyer.</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">CheckIn_Time <i class="text-red">*</i></label>
                                        <div class="col-md-9">
                                            <flatPickr
                                                    v-model="order.checkin_time"
                                                    :config="{enableTime: true, dateFormat: 'Y-m-d H:i:S', time_24hr: true}"
                                                    class="form-control"
                                                    >
                                            </flatPickr>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">CheckOut_Time </label>
                                        <div class="col-md-9">
                                            <flatPickr
                                                    v-model="order.checkout_time"
                                                    :config="{enableTime: true, dateFormat: 'Y-m-d H:i:S', time_24hr: true}"
                                                    class="form-control"
                                            >
                                            </flatPickr>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Guest_Name</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="guest_name"
                                                   v-model="order.guest_name"
                                            >
                                        </div>
                                    </div>

                                    <div class="form-group"
                                         :class="{'has-error': !order.guest_num.length && isOrder}">
                                        <label class="control-label col-md-3">Guest_Number <i class="text-red">*</i></label>
                                        <div class="col-md-9">
                                            <input type="number" class="form-control" placeholder="guest_num"
                                                   v-model="order.guest_num"
                                            >
                                            <span class="help-block"
                                                  v-show="!order.guest_num.length && isOrder">This field must be required</span>
                                        </div>
                                    </div>

                                    <div class="form-group"
                                         :class="{'has-error': !order.reservation_code.length && isOrder}">
                                        <label class="control-label col-md-3">Reservation_Code <i class="text-red">*</i></label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="reservation_code"
                                                   v-model="order.reservation_code"
                                            >
                                            <span class="help-block"
                                                  v-show="!order.reservation_code.length && isOrder">This field must be required</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Room_Title</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="room_title"
                                                   v-model="order.room_title"
                                            >
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Order_From</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="order_from"
                                                   v-model="order.order_from"
                                            >
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Total_Price</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="total_cost"
                                                   v-model="order.total_cost"
                                            >
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Clean Fee</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                <div class="input-group-btn">
                                                    <a class="btn fee btn-info" title="Logical room id"
                                                       @click.stop="getFixedCleanFee"
                                                       data-container=".insert-order" data-placement="right" data-html="true" style="color:#fff !important;"
                                                    >
                                                        Get Fee
                                                    </a>
                                                </div>
                                                <input type="text" class="form-control" placeholder="Clean Fee"
                                                       v-model="order.clean_fee"
                                                >
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Service_Fee</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" placeholder="service_fee"
                                                   v-model="order.service_fee"
                                            >
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Status</label>
                                        <div class="col-md-9">
                                            <select class="form-control" v-model="order.status">
                                                <option value="NORMAL">NORMAL</option>
                                                <option value="FREE">FREE</option>
                                                <option value="SPECIAL">SPECIAL</option>
                                                <option value="HALF_PRICE">HALF_PRICE</option>
                                                <option value="HOST">HOST</option>
                                                <option value="BNB_ALT">BNB_ALT</option>
                                                <option value="CANCEL_PRE">CANCEL_PRE</option>
                                            </select>
                                            <span class="help-block text-danger">Offline Order </span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Currency</label>
                                        <div class="col-md-9">
                                            <select class="form-control" v-model="order.currency">
                                                <option :key="'currency' + index"  v-for="(currency, index) in currencies">{{currency}}</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="control-label col-md-3">Platform</label>
                                        <div class="col-md-9">
                                            <select class="form-control" v-model="order.platform">
                                                <option v-for="item in platforms" :value="item.value">{{item.label}}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Comment</label>
                                        <div class="col-md-9">
                                            <textarea type="text" class="form-control" placeholder="comment"
                                                      v-model="order.comment"
                                            ></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-offset-3 col-md-9">
                                                    <button type="button" class="btn btn-success" @click="insert">Submit</button>
                                                    <button type="button" class="btn btn-default" @click="reset">Reset</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from '@/config'
    import {getLidsByPid, getPidsByLid} from '@/api/room'
    import {insert, getRoomStandardCleanFee} from '@/api/order'
    import Loading from '@/components/widgets/Loading'
    import 'flatpickr/dist/flatpickr.css';
    import flatPickr from 'vue-flatpickr-component';
    //import moment from 'moment'
    import swal from 'sweetalert'
    export default {
        name: "InsertOrder",
        components: {Loading, flatPickr},
        created() {
            this.currencies = config.CURRENCY
            this.platforms = config.PLATFORM
        },
        data() {
            return {
                order: {
                    platform: 'offline',
                    physical_room_id: '',
                    logical_room_id: '',
                    checkin: '',
                    checkout: '',
                    checkin_time: '',
                    checkout_time: '',
                    guest_num: '',
                    status: 'HOST',
                    currency: 'JPY',
                    reservation_code: '',
                    clean_fee: '',
                    order_from: ''
                },
                isOrder: true,
                isIcal: true,
                loading: false
            }
        },
        methods: {
            getLid() {
                if ($.trim(this.order.physical_room_id) && !$(".popover").length) {
                    getLidsByPid({physical_room_id: this.order.physical_room_id}).then(res => {
                        let data = res.data
                        let lids = '<ul class=\'nav\'>'
                        data.forEach(item => {
                            lids += `<li>${item.lid}(${item.platform})</li>`
                        })
                        lids += '</ul>'
                        $(".lid-btn").popover({
                            'content': lids,
                            trigger: 'manual',
                            placement: 'left'
                        })
                        $(".lid-btn").popover('show')
                    })
                } else {
                    $(".lid-btn").popover('destroy')
                    $(".pid-btn").popover('destroy')
                }
            },
            getPid() {
                if ($.trim(this.order.logical_room_id)) {
                   getPidsByLid({logical_room_id: this.order.logical_room_id}).then(res => {
                        if (res.data && res.data.length) {
                            let data = res.data
                            this.order.physical_room_id = data[0].pid
                        } else {
                            $.toast({
                                heading: 'Not matched Physical_room_id',
                                text: '',
                                position: 'top-right',
                                loaderBg: '#ff6849',
                                icon: 'error',
                            });
                        }

                    })
                }
            },
            getFixedCleanFee() {
                if ($.trim(this.order.physical_room_id)) {
                    getRoomStandardCleanFee({pid : this.order.physical_room_id, currency: this.order.currency}).then(res => {
                        if (!res.data.fee) {
                            return $.toast({
                                heading: 'This room hasn\'t fixed clean fee',
                                text: '',
                                position: 'top-right',
                                loaderBg: '#ff6849',
                                icon: 'error',
                            });
                        }
                        this.order.clean_fee = res.data.fee
                    })
                } else {
                    $.toast({
                        heading: 'Fill Physical_room_id',
                        text: '',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    });
                }
            },
            reset() {
                this.order = {
                    platform: 'offline',
                    physical_room_id: '',
                    logical_room_id: '',
                    checkin: '',
                    checkout: '',
                    checkin_time: '',
                    checkout_time: '',
                    guest_num: '',
                    status: 'HOST',
                    currency: 'JPY',
                    reservation_code: '',
                    clean_fee: '',
                    order_from: ''
                }
            },
            insert() {
                let type = 0
                if (this.isOrder && this.isIcal) { // 插入订单和ical
                    if (!$.trim(this.order.physical_room_id) ||
                        !$.trim(this.order.guest_num) || !$.trim(this.order.reservation_code) ||
                        !this.order.checkin ||
                        !this.order.checkout) {
                        $.toast({
                            heading: 'You must fill fields with *',
                            text: '',
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                        });
                        return false
                    }
                    type = "0"
                } else if (!this.isOrder && this.isIcal) { // 只插ical
                    if (!$.trim(this.order.logical_room_id) ||
                        !this.order.checkin ||
                        !this.order.checkout) {
                        $.toast({
                            heading: 'You must fill fields with *',
                            text: '',
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                        });
                        return false
                    }
                    type = "2"
                } else if (this.isOrder && !this.isIcal) { // 只插order
                    if (!$.trim(this.order.physical_room_id) ||
                        !$.trim(this.order.guest_num) || !$.trim(this.order.reservation_code) ||
                        !this.order.checkin ||
                        !this.order.checkout) {
                        $.toast({
                            heading: 'You must fill fields with *',
                            text: '',
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                        });
                        return false
                    }
                    type = "1"
                } else {
                    return
                }
                let d1 = new Date(this.order.checkin)
                let d2 = new Date(this.order.checkout)
                if (d2 - d1 < 0) {
                    $.toast({
                        heading: 'Checkout less than checkin...',
                        text: '',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    });
                    return false
                }

                this.order.type = type

                if (this.order.checkin_time) {
                    this.order.checkin_time = moment(this.order.checkin_time).utc().format('YYYY-MM-DD HH:mm:ss')
                }

                if (this.order.checkout_time) {
                    this.order.checkout_time = moment(this.order.checkout_time).utc().format('YYYY-MM-DD HH:mm:ss')
                }

                swal({
                    title: "Are you sure?",
                    text: "Add this order",
                    icon: "warning",
                    dangerMode: true,
                    buttons: true,
                }).then( (will)=> {
                    if (will) {
                        this.loading = true
                        insert(this.order).then(res => {
                            this.loading = false
                            if (!res.data.error) {
                                swal("success", "", "success")
                            } else {
                                swal(res.data.msg, "", "error")
                            }
                        }).catch(e => {
                            this.loading = false
                        })
                    }
                })
                return false
            },
            listen(e) {

            }
        },
        watch: {
            isOrder() {
                if (!this.isOrder && !this.isIcal) {
                    $.toast({
                        heading: 'Chose one type to insert',
                        text: '',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    });
                    this.isOrder = true
                    this.isIcal = true
                }
            },
            isIcal() {
                if (!this.isOrder && !this.isIcal) {
                    $.toast({
                        heading: 'Chose one type to insert',
                        text: '',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    });
                    this.isOrder = true
                    this.isIcal = true
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .insert-order
        .flatpickr-input
            background-color :#fff;
</style>